<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/11/9 09:59
 -->
<template>
  <div class="page">
    <div class="bg-[#fff] p-12px pb-0">
      <el-form label-width="80px" label-position="right">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="登陆账号">
              <el-input v-model="search.account" placeholder="请输入登陆账号" class="w-full" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="search.userName" placeholder="请输入用户姓名" class="w-full" clearable></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="search.status" placeholder="请选择" class="w-full" clearable>
                <el-option v-for="item in options.zt" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <div class="pl-8px">
              <el-button type="primary">查询</el-button>
              <el-button @click="onReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="mt-10px bg-[#fff] py-8px px-12px">
      <g-title>
        <div class="w-full flex justify-between items-center">
          <span>用户信息列表</span>
          <div>
            <el-button type="primary" size="mini" @click="onShowDialog('add')">新增用户</el-button>
          </div>
        </div>
      </g-title>
      <g-table ref="table" v-bind="table" class="absolute flex-1"></g-table>
      <g-pagination v-if="tablePage.total" v-bind.sync="tablePage" class="mt-8px"></g-pagination>
    </div>

    <!-- 新增用户   -->
    <UserAddEdit ref="userAddRef" :model="1" :visible.sync="visible.add"></UserAddEdit>

    <!-- 编辑用户   -->
    <UserAddEdit ref="userEditRef" :model="2" :visible.sync="visible.edit"></UserAddEdit>
  </div>
</template>

<script>
import UserAddEdit from './components/UserAddEdit.vue'
export default {
  components: { UserAddEdit },
  data() {
    return {
      visible: {
        add: false,
        edit: false
      },
      search: {
        account: '',
        userName: '',
        status: '正常'
      },
      options: {
        zt: [
          { label: '正常', value: '正常' },
          { label: '注销', value: '注销' }
        ]
      },
      tablePage: {
        page: 1,
        total: 1,
        size: 5,
        background: true,
        layout: 'total, sizes, prev, pager, next'
      },
      table: {
        // 审批待办
        loading: true,
        data: [],
        height: `calc(100vh - 320px)`,
        columns: [
          { type: 'index', label: '序号', width: '120px' },
          { prop: 'title', label: '账号', align: 'center' },
          { prop: 'title', label: '姓名', align: 'center' },
          { prop: 'index', label: '性别', align: 'center' },
          { prop: 'index', label: '所属部门', align: 'center' },
          { prop: 'index', label: '用户状态', align: 'center' },
          { slot: 'operation', label: '操作', width: '150px', align: 'center' }
        ]
      }
    }
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {
    this.$once('hook:beforeDestroy', () => {
      // this.removeEvents()
    })
  },

  methods: {
    onShowDialog(type) {
      if (type == 'add') {
        this.visible.add = true
      } else if (type == 'edit') {
        this.visible.edit = true
      }
    },

    onReset() {
      this.search = {
        ...this.search,
        account: '',
        userName: '',
        status: '正常'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
}
</style>
